<template>
  <div style="width: 100%; height: 100%">
    <div class="context-one">
      <div class="context-one-top">
        <img src="../assets/img/Logo.png" alt="" class="logo-img" />
        <div class="top-navbar">
          <ul>
            <li>首页</li>
            <li>岗位展示</li>
            <li>工作分类</li>
            <li>关于创思</li>
          </ul>
        </div>
        <el-button class="login-but" type="text">登录</el-button>
        <el-button class="user-infor" type="text" @click="userinforForm">用户完善</el-button>
        <el-button class="navber-but">发布岗位</el-button>
      </div>
      <div class="context-one-footer">
        <h2>269+ 岗位需求</h2>
        <h1>预祝你在创思信息找到心仪工作</h1>
        <p>
          创思信息以“工匠精神”推动产业互联网升级，推动政府事务单位业务处理自动化，助力工业4.0转型升级！
        </p>
        <el-button class="view-post-but">查看岗位</el-button>
      </div>
    </div>
    <div class="context-two">
      <div class="condition-query demo-input-size">
        <el-input
          v-model="position_description"
          placeholder="输入岗位关键字"
          style="width: 150px"
        ></el-input>
        <el-input
          v-model="address"
          placeholder="位置"
          style="width: 60px; margin-left: 50px"
        ></el-input>
        <el-select
          v-model="value"
          clearable
          placeholder="分类"
          style="width: 80px; margin-left: 60px"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select
          v-model="value1"
          clearable
          placeholder="选择岗位信息"
          style="width: 150px; margin-left: 60px"
        >
          <el-option
            v-for="item in options1"
            :key="item.value1"
            :label="item.label"
            :value="item.value1"
          >
          </el-option>
        </el-select>
        <el-button
          style="color: #fff; background-color: #2a2ad1; margin-left: 60px"
          >找工作</el-button
        >
      </div>
      <div class="search-words">
        最近搜索热词：
        <el-button>JAVA工程师</el-button>
        <el-button>Web前端工程师</el-button>
        <el-button>UI/UX</el-button>
        <el-button>行政管理</el-button>
      </div>
    </div>
    <div class="context-three"></div>
    <div class="context-four">
      <h1>创思团队建设</h1>
      <p>
        获得工信部计算机系统集成壹级资质，通过ISO020000
        IT服务管理体系认证，通过软件能力成熟度模型CMMI
        5级认证，通过ISO27001信息安全管理系统认证，
        通过ISO14001国际环境管理系统认证，
        通过ITSS信息技术服务运行维护标准认证，
        获得专利技术1200余项，自有知识产权框架平台8个，
        获得软件著作权2500多个。创思信息现有员工530余人，
        其中：博士生100余人，研究生200余人，专业技术人才230余人。
        公司总部位于湖南长沙，下设杭州分公司、北京分公司、广州分公司、
        海口分公司、西安分公司、湘潭分公司及办事处。
      </p>
      <img src="../assets/img/Card_Webtton.png" alt="" class="four-img1" />
      <img src="../assets/img/Card_Dribbble.png" alt="" class="four-img2" />
      <img src="../assets/img/Card_Shoppy.png" alt="" class="four-img3" />
      <img src="../assets/img/Card_TokoPedia.png" alt="" class="four-img4" />
    </div>
    <div class="context-five">
      <div class="look-job-one">
        <h3>你是不是想在创思找工作?</h3>
        <p>
          我们在线上为您安排了200多个工作岗位，欢迎你咨询！您可查询本网，可快速了解现有岗位情况。
        </p>
        <el-button>岗位展示</el-button>
      </div>
      <div class="look-job-two">
        <h3>你是不是想在平台发布工作？?</h3>
        <p>
          人力资源部、部门经理、项目经理，都可以在此平台发布工作了哦，欢迎试用！
        </p>
        <el-button>发布广告</el-button>
      </div>
    </div>
    <div class="context-six">
      <img src="../assets/img/Image_Testitomi.png" alt="" />
      <div class="user-evaluation">
        <h2>用户评价</h2>
        <p>
          “UI小姐姐在此提示现在正在制作这个页面的各位前端朋友，
          希望你能顺利通过测试，取得较好的成绩，不要忘记哦，
          这个页面需要做自适应，请按f12进入开发者模式，适配不同的屏幕大小。
          这个千万不要忘记哦。另外按钮动作，浮动动画也可以有哦。相信你，加油！”
        </p>
      </div>
    </div>
    <div class="context-seven"></div>
  </div>
</template>
<script>
export default {
  data: function () {
    return {
      position_description: "",
      address: "",
      value: "",
      value1: "",
      options: [
        {
          value: "选项1",
          label: "后端",
        },
        {
          value: "选项2",
          label: "前端",
        },
        {
          value: "选项3",
          label: "数据库",
        },
      ],
      options1: [
        {
          value: "选项1",
          label: "前端",
        },
        {
          value: "选项2",
          label: "后端",
        },
        {
          value: "选项3",
          label: "数据库",
        },
      ],
    };
  },
  methods: {
    userinforForm() {
      this.$router.push("/userinformation")
    }
  }
};
</script>
<style scoped>
.context-one {
  width: 100%;
  height: 100%;
  background: url(../assets/img/Navbar.png) no-repeat center;
}
.context-one-top {
  position: fixed;
  z-index: 999;
}
.logo-img {
  position: absolute;
  width: 270px;
  height: 90px;
  margin: 40px 0 0 180px;
}
.top-navbar {
  position: absolute;
  margin: 80px 0 0 620px;
}
.top-navbar ul li {
  float: left;
  list-style: none;
  margin-left: 50px;
  color: #fff;
  font-size: 20px;
}
.login-but {
  position: absolute;
  margin: 70px 0 0 1150px;
  color: #fff;
  font-size: 20px;
}
.user-infor {
  position: absolute;
  margin: 70px 0 0 1220px;
  color: #fff;
  font-size: 20px;
}
.navber-but {
  background-color: #000;
  color: #fff;
  font-size: 20px;
  margin: 65px 0 0 1360px;
  border-radius: 5px;
}
.context-one-footer {
  position: relative;
}
.context-one-footer h2 {
  position: absolute;
  color: #fff;
  font-size: 28px;
  margin: 200px 0 0 250px;
}
.context-one-footer h1 {
  position: absolute;
  color: #fff;
  font-size: 30px;
  margin: 250px 0 0 250px;
}
.context-one-footer p {
  position: absolute;
  color: #fff;
  font-size: 20px;
  margin: 300px 0 0 250px;
  width: 400px;
}
.view-post-but {
  position: absolute;
  background-color: #000;
  color: #fff;
  margin: 400px 0 0 250px;
  border-radius: 5px;
}
.context-two {
  position: relative;
  width: 100%;
  height: 30%;
  background-color: #f7f7f7;
}
.condition-query {
  position: absolute;
  margin: 80px 0 0 350px;
}
.search-words {
  position: absolute;
  margin: 150px 0 0 350px;
}
.search-words .el-button {
  height: 40px;
  background-color: #2a2ad1;
  color: #fff;
  margin-left: 50px;
}
.context-three {
  width: 100%;
  height: 100%;
  background: url(../assets/img/Popular_Category.png) no-repeat center;
}
.context-four {
  position: relative;
  width: 100%;
  height: 60%;
  background-color: #f7f7f7;
}
.context-four h1 {
  position: absolute;
  font-size: 40px;
  font-weight: 400;
  margin: 100px 0 0 200px;
}
.context-four p {
  position: absolute;
  width: 600px;
  font-size: 18px;
  margin: 200px 0 0 200px;
}
.four-img1 {
  position: absolute;
  margin: -20px 0 0 800px;
}
.four-img2 {
  position: absolute;
  margin: 50px 0 0 1200px;
}
.four-img3 {
  position: absolute;
  margin: 250px 0 0 860px;
}
.four-img4 {
  position: absolute;
  margin: 270px 0 0 1200px;
}
.context-five {
  width: 100%;
  height: 100%;
  background: url(../assets/img/Looking.png) no-repeat center;
}
.look-job-one {
  position: relative;
  float: left;
  width: 50%;
  height: 100%;
}
.look-job-one h3 {
  position: absolute;
  font-size: 30px;
  font-weight: 400;
  color: #fff;
  margin: 250px 0 0 200px;
}
.look-job-one p {
  position: absolute;
  font-size: 20px;
  color: #fff;
  width: 500px;
  margin: 350px 0 0 200px;
}
.look-job-one .el-button {
  position: absolute;
  color: #fff;
  background-color: #000;
  margin: 450px 0 0 200px;
  border-radius: 5px;
}
.look-job-two {
  position: relative;
  float: left;
  width: 50%;
  height: 100%;
}
.look-job-two h3 {
  position: absolute;
  font-size: 30px;
  font-weight: 400;
  color: #fff;
  margin: 250px 0 0 50px;
}
.look-job-two p {
  position: absolute;
  width: 500px;
  font-size: 20px;
  color: #fff;
  margin: 350px 0 0 50px;
}
.look-job-two .el-button {
  position: absolute;
  color: #fff;
  background-color: #000;
  margin: 450px 0 0 50px;
  border-radius: 5px;
}
.context-six {
  width: 100%;
  height: 50%;
  background-color: #f7f7f7;
}
.context-six img {
  float: left;
  width: 500px;
  height: 440px;
  margin: 50px 0 0 300px;
}
.user-evaluation {
  float: left;
  position: relative;
  width: 750px;
  height: 100%;
}
.user-evaluation h2 {
  position: absolute;
  font-size: 30px;
  font-weight: 400;
  margin: 100px 0 0 70px;
}
.user-evaluation p {
  position: absolute;
  width: 550px;
  margin: 150px 0 0 70px;
}
.context-seven {
  width: 100%;
  height: 100%;
  background: url(../assets/img/Footer.png) no-repeat center;
}
</style>
